<template>
  <div style="margin: 0 100px">
    <div style="display:flex;justify-content:flex-end;margin-right:65px">
       <el-button type="primary" size="small" @click="goBack()" style=""
        >&lt;&lt;&nbsp;返回</el-button
      >
    </div>
    <el-row>
      <h4 style="text-align: left; margin: 0px 0 10px">考试须知</h4>
      
    </el-row>
    <!-- 描述列表1 -->
    <!-- 这个是描述列表总宽度 -->
    <el-row style="width: 1000px">
      <!-- 每页两条数据，表格大小small，可以换mini或者medium   -->
      <!-- :labelStyle是描述列表前面的参数列的列宽和居中 -->
      <!-- :contentStyle是描述列表的数据列的列宽   注意加起来要和前面的列表总宽度一致-->
      <el-descriptions
        :column="2"
        border
        size="small"
        :labelStyle="{ 'text-align': 'center', width: '100px' }"
        :contentStyle="{ width: '400px' }"
      >
        <el-descriptions-item label="考试名称" label-class-name="aaa">{{
          this.data.examEname
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="考试时间">{{
          this.one.startTime
        }}</el-descriptions-item> -->
        <el-descriptions-item label="参加限制" prop="id">{{
          this.one.canjiaxianzhi
        }}</el-descriptions-item>
        <el-descriptions-item label="答题时间"
          >{{ this.data.examAnserTime }}分钟</el-descriptions-item
        >
        <el-descriptions-item label="交卷限制">{{
          this.one.jiaojuanxianzhi
        }}</el-descriptions-item>
        <el-descriptions-item label="考试说明">{{
          this.one.state
        }}</el-descriptions-item>
        <el-descriptions-item label="考试提醒">{{
          this.one.prompt
        }}</el-descriptions-item>
        <el-descriptions-item label="提醒时间">{{
          this.one.promptTime
        }}</el-descriptions-item>
        <el-descriptions-item label="考生须知">{{
          this.data.examExplain
        }}</el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-row>
      <h4 style="text-align: left; margin: 20px 0 10px">试卷信息</h4>
    </el-row>
    <!-- 描述列表2 -->
    <!-- 同上 -->
    <el-row style="width: 1000px">
      <el-descriptions
        :column="2"
        border
        size="small"
        :labelStyle="{ 'text-align': 'center', width: '100px' }"
        :contentStyle="{ width: '400px' }"
      >
        <el-descriptions-item label="试卷名称">{{
          this.data.paperAttribute.name
        }}</el-descriptions-item>
        <el-descriptions-item label="试卷难度">{{
          this.data.paperAttribute.difficulty
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="试题排序">{{
          this.two.testSort
        }}</el-descriptions-item> -->
        <el-descriptions-item label="试卷题型">{{
          this.data.paperAttribute.type
        }}</el-descriptions-item>
        <el-descriptions-item label="试卷说明">{{
          this.data.paperAttribute.note
        }}</el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-row>
      <h4 style="text-align: left; margin: 20px 0 10px">考生信息</h4>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-table
        :data="tableData.examineeInformationList"
        border
        style="width: 1000px"
      >
        <el-table-column
          align="center"
          type="selection"
          width="45"
        ></el-table-column>
        <el-table-column
          align="center"
          type="index"
          :index="indexMethod"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="idNumber"
          label="证件号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sex"
          label="性别"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="telephone"
          label="联系电话"
        ></el-table-column>

        <el-table-column
          prop="examineeIsCorrect"
          label="审批状态"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.examineeIsCorrect == 0"
              >已批改或考生还未答题</span
            >
            <span
              v-else-if="scope.row.examineeIsCorrect != 0"
              style="color: red"
              >未批改</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.examineeIsCorrect == 0"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.examineeIsCorrect != 0"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              style="color: red"
              >批改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //用来接收路由传过来的数据
      data: "",

      //用来渲染表格
      tableData: {},

      //描述列表1展示的假数据
      one: {
        testName: "计算机等级考试", //名称
        startTime: "2021-05-21 14:00:00 - 16:00:00", //考试时间
        canjiaxianzhi: "考试开始15分钟", //参加限制
        testTime: "60分钟", //答题时间
        jiaojuanxianzhi: "考试结束前15分钟", //交卷限制
        state: "常规考试", //考试说明
        prompt: "开启", //考试提醒
        promptTime: "15分钟", //提醒时间
        notice: "服从考试安排", //考生须知
      },
      //描述列表2展示的假数据
      two: {
        testPaper: "计算机二级试卷", //试卷名称
        difficulty: "容易", //试卷难度
        testSort: "固定排序", //试题排序
        optionsSort: "固定排序", //选项排序
        passingScore: 60, //合格分数
      },
      //用来往后端传，看哪些学生未批改
      examData: "",
    };
  },
  //钩子函数
  created() {
    // console.log(this.$route.params.data);
    this.data = this.$route.params.data;
    // this.findAll();
    // console.log(this.data);
    // this.selectQuestionTypes();
    //查看学生是否批改
    this.searchExamineeIsCorrect(this.data);
  },

  methods: {
    searchExamineeIsCorrect(data) {
      // console.log("查看学生是否批改:"+ data);
      // alert(data);
      // console.log(data);
      this.$axios
        .post("/api/correctExamController/findExamineeIsCorrect", data)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
          console.log(this.tableData);
        })
        .catch(() => {});
    },

    handleClick(data) {
      // console.log(data);
      this.$router.push({
        name: "correctInterface", //路由配置中的name
        params: {
          data,
          eid:this.tableData.id
        },
      });
    },
    //序号
    indexMethod(index) {
      return (
        // (this.pageparm.currentPage - 1) * this.pageparm.pageSize + index + 1
        index + 1
      );
    },
    //返回前一页
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style>
/* .aaa{
        width: 100px;
        text-align: center;
    } */
</style>